<template>
  <!--侧滑菜单容器-->
  <div id="offCanvasWrapper" class="mui-off-canvas-wrap">
    <!--菜单部分-->
    <div
      v-if="isShowFilter"
      @click="isShowFilter = false"
      class="filter-bg"
    ></div>
    <aside
      v-if="isShowFilter"
      id="offCanvasSide"
      class="mui-off-canvas-right aside-menu filter-wrap"
    >
      <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
        <div class="mui-scroll flex-column flex-space-between">
          <div>
            <h4 class="means-title">答题时间</h4>
            <div class="flex-justify-start">
              <div
                @click.stop="showTimePicker(0)"
                class="gray-btn time-filter-input"
              >
                <input
                  class="gray-btn"
                  type="text"
                  readonly
                  v-model="startTime"
                  placeholder="开始时间"
                />
              </div>
              <p style="margin-top: 13px; margin-left: 5px">-</p>
              <div
                @click.stop="showTimePicker(1)"
                class="gray-btn time-filter-input"
              >
                <input
                  class="gray-btn"
                  type="text"
                  readonly
                  v-model="endTime"
                  placeholder="结束时间"
                />
              </div>
            </div>
          </div>
          <div class="flex-center screen-btn">
            <div @click="reset" class="reset-btn offCanvasHide">重置</div>
            <div @click="submit" class="sure-btn offCanvasHide">确定</div>
          </div>
        </div>
      </div>
    </aside>
    <div class="mui-inner-wrap">
      <div
        id="offCanvasContentScroll"
        class="mui-content mui-scroll-wrapper record-member-lists"
      >
        <header @click="isShowFilter = false" class="mui-bar mui-bar-nav">
          <div class="header-common-title flex-justify-start">
            <div @click="fn.goHome()" class="mui-action-back">
              <img class="back-btn" src="../../../../static/images/back.png" />
            </div>
            <div class="header-search flex-center">答题记录</div>
            <div class="header-right flex-between-center">
              <a
                @click.stop="isShowFilter = true"
                href="javascript:void(0)"
                class="header-right flex-center"
                ><img src="../../../../static/images/shaixuan.png" />筛选</a
              >
            </div>
          </div>
        </header>
        <div @click="isShowFilter = false" class="message-tab people-header">
          <div class="header-search all-search">
            <input
              type="search"
              v-model="paperName"
              placeholder="请输入主题关键字搜索答题记录"
            />
            <i class="people-search" @click="search"></i>
          </div>
        </div>
        <div
          @click="isShowFilter = false"
          class="mui-scroll-wrapper mui-page-content mui-pages organization-lists"
        >
          <div class="mui-scroll-wrapper mui-pages organization-lists">
            <cube-scroll
              ref="scroll"
              :options="options"
              @pulling-up="onPullingUp"
            >
              <cube-swipe>
                <transition-group name="swipe" tag="div">
                  <div
                    class="mui-table-view organization-lists"
                    v-for="(data, index) in swipeData"
                    :key="data.id"
                  >
                    <cube-swipe-item
                      ref="swipeItem"
                      :btns="data.btns"
                      :index="index"
                      :class="{ 'swiper-no-swiping': true }"
                    >
                      <div @click="detail(data)">
                        <li class="mui-table-view-cell">
                          <div class="mine-lists-content flex-between-center">
                            <div>
                              <h2 class="organization-lists-title">
                                试卷名称：<span v-html="data.name"></span>
                              </h2>
                              <h2 class="organization-lists-title">
                                答题积分：<span>+{{ data.score }}</span
                                >分
                              </h2>
                              <div class="organization-lists-time">
                                <span>{{ data.realEndDate }}</span>
                              </div>
                            </div>
                            <span class="mui-icon mui-icon-arrowright"></span>
                          </div>
                        </li>
                      </div>
                    </cube-swipe-item>
                  </div>
                </transition-group>
              </cube-swipe>
              <!-- <div class="text-center no-data" v-if="swipeData.length===0">
                <img src="../../../../static/images/no_data.png" alt="">
                <p>暂无数据</p>
              </div> -->
              <!-- W noData -->
              <noData v-if="swipeData.length === 0"></noData>
              <onBottom v-else-if="onBottom"></onBottom>
            </cube-scroll>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部tabbar    start -->
    <partyMemberLearningFooterbar></partyMemberLearningFooterbar>
  </div>
</template>

<script>
import partyMemberLearningFooterbar from "../common/partyMemberLearningFooterbar.vue";
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
import moment from "moment";
export default {
  components: {
    partyMemberLearningFooterbar,
  },
  name: "answerRecord",
  data() {
    return {
      fn: tools,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      objectsName: "",
      swipeData: [],
      infinite: true,
      pageIndex: 0,
      pageSize: 20,
      isShowFilter: false,
      startTime: "",
      endTime: "",
      paperName: "",
    };
  },
  created() {
    this.loadData();
  },
  watch: {
    paperName(newValue, oldValue) {
      this.search();
    },
  },
  methods: {
    detail(data) {
      this.$store.state.answerRecord = data;
      this.$router.push({ path: `/answerDetails/${data.id}/1` });
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    loadData() {
      let startTime = "";
      let endTime = "";
      if (this.startTime.length > 0) {
        startTime = this.startTime + " 00:00:00";
      }
      if (this.endTime.length > 0) {
        endTime = this.endTime + " 00:00:00";
      }
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        sortOrder: "DESC",
        sortField: "createDate",
        isSelf: "1",
        answerStartTime: startTime,
        answerEndTime: endTime,
        paperName: this.paperName,
        answerStatus: "12",
      };
      loginService.getExamPaperList(data).then((res) => {
        if (res.code === 200 && res.data.length < 1) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return tools.tip("已无更多数据");
        }
        this.pageIndex++;
        let searchReg = new RegExp(`${this.paperName}`, "g");
        let searchReplace = `<span class="text-red">${this.paperName}</span>`;
        res.data.forEach((v, i) => {
          // 标红字体
          if (this.paperName.length > 0) {
            v.name = v.name.replace(searchReg, searchReplace);
          }
        });
        this.swipeData = this.swipeData.concat(res.data);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = !true;
        }, 100);
      });
    },
    search() {
      this.swipeData = [];
      this.pageIndex = 0;
      this.loadData();
    },
    submit() {
      this.pageIndex = 0;
      this.swipeData = [];
      this.isShowFilter = false;
      this.loadData();
    },
    showTimePicker(flag) {
      let _this = this;
      this.$createDatePicker({
        onSelect: (selectedTime, selectedText, formatedTime) => {
          if (flag === 0) {
            _this.startTime = moment(selectedTime).format("YYYY-MM-DD");
          } else {
            _this.endTime = moment(selectedTime).format("YYYY-MM-DD");
          }
        },
      }).show();
    },
    reset() {
      this.startTime = "";
      this.endTime = "";
    },
  },
};
</script>

<style scoped="" lang="scss">
#offCanvasSide {
  visibility: visible;
  z-index: 13;
}

.swiper-no-swiping {
  transform: translateX(0) !important;
}

.filter-wrap {
  z-index: 13;
  visibility: visible;
}

.filter-bg {
  background: rgba(#000, 0.3);
  z-index: 12;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
</style>
